import React from 'react';
import styles from './Header.module.css'; // css作为模块被加载
import { Input, Layout, Typography, Menu, Dropdown, Button } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';
import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom';

export const Header: React.FC = () => {

    const history = useHistory(); // 访问history对象
    const location = useLocation(); // 获取location对象
    const params = useParams(); // 访问路由参数
    const match = useRouteMatch(); // 获取match对象

    console.log(history, location, params, match);

    return (
        <div className={styles['app-header']}>
            <div className={styles['top-header']}>
                <Typography.Text>让旅游更幸福</Typography.Text>
                <Dropdown.Button
                    style={{ marginLeft: 15 }}
                    overlay={
                        <Menu>
                            <Menu.Item>中文</Menu.Item>
                            <Menu.Item>English</Menu.Item>
                        </Menu>
                    }
                    icon={<GlobalOutlined />}>
                    语言
                </Dropdown.Button>
                <Button.Group className={styles['button-group']}>
                    <Button onClick={() => history.push("register")}>注册</Button>
                    <Button onClick={() => history.push("signIn")}>登录</Button>
                </Button.Group>
            </div>
            {/* 搜索 */}
            <Layout.Header className={styles['main-header']}>
                <Typography.Title level={3} className={styles.title}>
                    React 旅游网
                </Typography.Title>
                <Input.Search placeholder='请输入关键字' className={styles['search-input']} />
            </Layout.Header>
            {/* 菜单 */}
            <Menu mode={'horizontal'} className={styles['main-menu']}>
                <Menu.Item key={1}>旅游首页</Menu.Item>
                <Menu.Item key={2}>周末游</Menu.Item>
                <Menu.Item key={3}>跟团游</Menu.Item>
                <Menu.Item key={4}>自由行</Menu.Item>
                <Menu.Item key={5}>私家团</Menu.Item>
                <Menu.Item key={6}>游轮</Menu.Item>
                <Menu.Item key={7}>酒店+景点</Menu.Item>
                <Menu.Item key={8}>当地玩乐</Menu.Item>
                <Menu.Item key={9}>主题游</Menu.Item>
                <Menu.Item key={10}>定制游</Menu.Item>
                <Menu.Item key={11}>游学</Menu.Item>
                <Menu.Item key={12}>签证</Menu.Item>
                <Menu.Item key={13}>企业游</Menu.Item>
                <Menu.Item key={14}>高端游</Menu.Item>
                <Menu.Item key={15}>户外</Menu.Item>
                <Menu.Item key={16}>保险</Menu.Item>
            </Menu>
        </div>
    );
};
